<!--我们知道，父组件是使用 props 传递数据给子组件，但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了-->
<template>
	<div class="froow">
		<h1>{{ msg.tltl }}</h1>
		<p>{{ msg.total }}</p>
  		<simple v-on:increment="incrementTotal"></simple>
  		<simple v-on:increment="incrementTotal"></simple>
	</div>
</template>

<script>
export default {
  name: 'froow',
  data () {
    return {
      msg: {
        tltl: '父子组件',
        total: 0
      }
    }
  },
  methods: {
    incrementTotal: function () {
      let e = 1
      this.msg.total += e
    }
  }
}
</script>

<style>
  /*four页面*/
	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #0f0f0f;
	}
</style>
